<template>
    <div id="dataStatistics" class="dataStatistics same-change-oldstyle">
        <div style="padding:0px 15px;box-sizing: border-box;">
             <div class="saem-seat-box" style="padding:30px 25px">
                <div class="saem-seat-left">
                    <span>当前位置：</span>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/dataStatistics' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>控制面板</el-breadcrumb-item>
                        <el-breadcrumb-item>数据统计</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="saem-seat-right">
                    <!-- <button class="same-search-btns same-search-export" >批量下载二维码</button> -->
                    <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
                    <!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
                </div>
            </div>
        </div>
        <div class="headBox">
            <div class="topshow">
                <!--安装时间:    -->
                <form action="" method="get" accept-charset="utf-8">
                    <!--
                                <el-date-picker
                                    v-model="value1"
                                    type="datetime"
                                    placeholder="选择开始时间">
                                </el-date-picker>
                                <el-date-picker
                                    v-model="value2"
                                    type="datetime"
                                    placeholder="选择结束时间">
                                </el-date-picker>
                                <button class="btnstyle" type="button">搜索</button>
                                -->
                    <span class='textshow'> 当前设备台数:  {{deviceCount.current_device_number}}台</span>
                    <span class="b_color" @click="jumpDevicelist()"><img src="../../assets/images/icon_rs.png" alt=""> 离线设备台数: {{deviceCount.abnormal_device_number}}台</span>
                    <span class="r_color"><img src="../../assets/images/danger.png" alt=""> 报警设备台数: {{deviceCount.alert_device_number}}台</span>
                </form>
            </div>
            <!-- 订单列表 -->
            <div class="top_box">
                <div class="list_Box">
                    <div class="top_head">收入</div>
                    <div><span>水卡充值收入:</span> <span>{{income.water_card_recharge|filterNumber}}元</span></div>
                    <div><span>在线打水收入:</span> <span>{{income.sale_water|filterNumber}}元</span></div>
                    <div><span>积分打水收入:</span> <span>{{income.integral_water}}个</span></div>
                </div>
                <div class="list_Box">
                    <div class="top_head">办卡总数</div>
                    <div><span>普通卡总计:</span> <span>{{card.ordinary_card}}张</span></div>
                    <div><span>老年卡总计:</span> <span>{{card.old_age_card}}张</span></div>
                    <div><span>婴儿卡总计:</span> <span>{{card.baby_card}}张</span></div>
                </div>
                <div class="list_Box">
                    <div class="top_head">订单</div>
                    <div><span>线下支付订单:</span> <span>{{order.card_pay}}笔</span></div>
                    <div><span>在线支付订单:</span> <span>{{order.online}}笔</span></div>
                    <div><span>积分支付订单:</span> <span>{{order.integral}}笔</span></div>
                </div>
                <div class="last_box">
                    <div class="last_head">设备收入排行榜</div>
                    <div class="topbtn">
                        <div class="all_choose">
                            <div :class="{'onit':chooseNum==1}" @click="chooseTop(1)">今日排行</div>
                            <div class="center_box" :class="{'onit':chooseNum==2}" @click="chooseTop(2)">七日排行</div>
                            <div :class="{'onit':chooseNum==3}" @click="chooseTop(3)">月排行</div>
                        </div>
                        <div class="all_choose">
                            <div :class="{'onit':chooseWay==1}" @click="chooseWaybtn(1)">水卡</div>
                            <div class="center_box" :class="{'onit':chooseWay==2}" @click="chooseWaybtn(2)">在线</div>
                            <div :class="{'onit':chooseWay==3}" @click="chooseWaybtn(3)">积分</div>
                        </div>
                    </div>
                    <div class="msg_box" v-loading="loading">
                        <div class="title_s">
                            <span class="show_a">排行</span><span class="show_b">设备名</span> <span class="show_c">水卡支付 <b>(金额/笔数)</b> </span>
                            <span class="show_d">在线支付 <b>(金额/笔数)</b> </span><span
                                class="show_e">积分支付 <b>(个数/笔数)</b> </span>
                        </div>
                        <div class="title_s" v-for="(item,index) in device_sort">
                            <span class="show_a">{{index+1}}</span><span class="show_b"><b>{{item.name}}</b></span>
                            <span class="show_c">{{item.card_pay_total}}/{{item.card_pay_number}}</span>
                            <span class="show_d">{{item.online_pay_total}}/{{item.online_pay_number}}</span><span
                                class="show_e">{{item.integral_pay_total}}/{{item.integral_pay_number}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 柱状图 -->
        <div class="mapBox">
            <div class="letterBox">
                <div class="choose_time">
                    <div class="on_choose_one" :class="{'on_show_it':on_chart==1}" @click='incomeCount(1)'>一年</div>
                    <div class="on_choose_one " :class="{'on_show_it':on_chart==2}" @click='incomeCount(2)'>本月</div>
                    <div class="on_choose_one" :class="{'on_show_it':on_chart==3}" @click='incomeCount(3)'>一周</div>
                    <div class="on_choose_one cente_choose" :class="{'on_show_it':on_chart==4}" @click='incomeCount(4)'>
                        今天
                    </div>
                </div>
                <div class="chart" ref="chartOne" :style="{width: '100%', height: '100%'}" v-loading="loading_a" element-loading-text="创建中..."></div>
            </div>
            <div class="letterBox">
                <div class="choose_time">
                    <div class="on_choose_one" :class="{'on_show_it':on_cherts==1}" @click="multipleCount(1)">一年</div>
                    <div class="on_choose_one" :class="{'on_show_it':on_cherts==2}" @click="multipleCount(2)">本月</div>
                    <div class="on_choose_one" :class="{'on_show_it':on_cherts==3}" @click="multipleCount(3)">一周</div>
                    <div class="on_choose_one cente_choose" :class="{'on_show_it':on_cherts==4}"
                         @click="multipleCount(4)">今天
                    </div>
                </div>
                <div class="chart" ref="chartTwo" :style="{width: '100%', height: '100%'}" v-loading="loading_b" element-loading-text="拼命创建中..."></div>
            </div>
        </div>
        <!-- more -->
        <div class="more_box">
            <div class="box_one">
                <div class="last_head">代办事项</div>
                <div class="list_mag" v-for="item in backlog"> {{item}}· 您有10条水卡申请未处理</div>
                <span class="span_show" v-if="backlog.length != 0">更多 ></span>
                <div class="no_data_show" v-if="backlog.length<=0 && isLoad">
                  <img src="../../assets/images/no_data.png" alt="">
                  <div>暂无代办事项</div>
                </div>
            </div>
            <div class="box_one">
                <div class="last_head">系统通知</div>
                <div class="list_mag" v-for="item in system_message">· {{item.title}}</div>
                <span class="span_show" v-if="system_message.length != 0">更多 ></span>
                <div class="no_data_show" v-if="system_message.length<=0 && isLoad">
                  <img src="../../assets/images/no_data.png" alt="">
                  <div>暂无系统通知</div>
                </div>
            </div>
            <div class="box_one">
                <div class="last_head">平台公告</div>
                <div class="list_mag" v-for="item in platform_bulletin">
                    <router-link :to="{path:'/announcementDetail',query: {id: item.nid}}">
                        · {{item.title}}
                    </router-link>
                </div>
                <span class="span_show" v-if="platform_bulletin.length != 0"  @click ="jumpMore()">更多 ></span>
                <div class="no_data_show" v-if="platform_bulletin.length<=0 && isLoad">
                  <img src="../../assets/images/no_data.png" alt="">
                  <div>暂无平台公告</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    //引入Echarts主模块
    let echarts = require('echarts/lib/echarts');
    export default {
        name: 'informMsg',
        data: function () {
            return {
                loading_a:false,//加载中
                loading_b:false,//加载中
                loading:false,//加载中
                value1: "", //开始时间
                value2: '', //结束时间
                chooseNum: 1, //排行条件
                chooseWay: 1, //选择方式
                on_chart: 1,//选择chart1
                on_cherts: 1,//选择chart2
                deviceCount: [],
                income: [],
                card: [],
                order: [],
                device_sort: [],
                backlog: [],
                system_message: [],
                platform_bulletin: [],
                isLoad: false,
            }
        },
        computed: {},
        created: function () {
            this.loading_a=true;
            this.loading_b=true;
        },
        inject: [
            'reload'
        ],
        methods: {
            RefreshFun(){
                console.log('触发事件')
                // 调用reload方法，刷新整个页面
                this.reload()
            },
            //返回
            returnBack(){
                this.$router.back(-1);
            },
            //跳转
            jumpDevicelist(){
                this.$router.push({path: '/devicelist', query: { stat_es: 2 } })
            },
            jumpMore(){
                this.$router.push({path: '/announcementList' })
            },
            //选择排行
            chooseTop(vlu) {
                this.loading = true;
                this.chooseNum = vlu;
                this.deviceSort(this.chooseNum, this.chooseWay);
            },
            //选择排行方式
            chooseWaybtn(vshow) {
                this.loading = true;
                this.chooseWay = vshow;
                this.deviceSort(this.chooseNum, this.chooseWay);
            },
            /*创建图表一*/
            createChartOne(data, abscissa) {
                let chartOne = echarts.init(this.$refs.chartOne);
                chartOne.setOption({
                    title: {
                        text: '收益统计'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['充值收益', '在线打水收益', '积分打水收益']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                           saveAsImage: {
                            show: false,
                    　　　　 excludeComponents :['toolbox'],
                    　　　　 pixelRatio: 2
                          }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        splitLine: {show: true}, //保留网格线
                        splitArea: {show: false}, //保留网格区域
                        boundaryGap: false,
                        // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日', '最后', '之后', '以后', '再来', '最后']
                        data: abscissa
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {show: true}, //保留网格线
                        splitArea: {show: false} //保留网格区域
                    },
                    series: data
                })
                this.loading_a=false;
            },
            /*创建图表二*/
            createChartTwo(data, abscissa) {
                let chartTwo = echarts.init(this.$refs.chartTwo);
                chartTwo.setOption({
                    title: {
                        text: '业务统计'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['新增设备数', '办卡数', '打水订单数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                          saveAsImage: {
                            show: false,
                    　　　　 excludeComponents :['toolbox'],
                    　　　　 pixelRatio: 2
                          }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        splitLine: {show: true}, //保留网格线
                        splitArea: {show: false}, //保留网格区域
                        boundaryGap: false,
                        data: abscissa
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {show: true}, //保留网格线
                        splitArea: {show: false} //保留网格区域
                    },
                    series: data
                })
                 this.loading_b=false;
            },
            //第一板块
            getDeviceCount() {
                var that = this;
                that.$post({
                    url: "Partner/Console/getDeviceCount",
                    data: {},
                    success: (data) => {
                        if (data.code == 1000) {
                            that.deviceCount = data.data;
                        } else {
                            this.$message({
                                showClose: true,
                                message: '请求失败或无数据',
                                center: true
                            });
                        }
                    }
                })
            },
            //第二板块
            businessStatistics() {
                var that = this;
                that.$post({
                    url: "Partner/Console/businessStatistics",
                    data: {},
                    success: (data) => {
                        if (data.code == 1000) {
                            that.income = data.data.income;
                            that.card = data.data.card;
                            that.order = data.data.order;

                        } else {
                            this.$message({
                                showClose: true,
                                message: '请求失败或无数据',
                                center: true
                            });
                            // alert('请求失败或无数据');
                        }
                    }
                })
            },
            //第三板块
            deviceSort(date,type) {
                var that = this;
                that.$post({
                    url: "Partner/Console/deviceSort",
                    data: {
                        type: type,
                        date: date
                    },
                    success: (data) => {
                        if (data.code == 1000) {
                            that.device_sort = data.data;
                            that.loading = false;
                        } else {
                            this.$message({
                                showClose: true,
                                message: '请求失败或无数据',
                                center: true
                            });
                        }
                    }
                })
            },
            //第四板块
            incomeCount(type_val) {
                var that = this;
                that.loading_a=true;
                var type_val = type_val;
                that.on_chart = type_val;
                that.$post({
                    url: "Partner/Console/incomeCount",
                    data: {
                        type: type_val
                    },
                    success: (data) => {
                        if (data.code == 1000) {
                            this.createChartOne(data.data.data, data.data.abscissa);

                        } else {
                            this.$message({
                                showClose: true,
                                message: '请求失败或无数据',
                                center: true
                            });
                        }
                    }
                })
            },
            //第五板块
            multipleCount(type_ot) {
                var that = this;
                that.loading_b=true;
                var type_ot = type_ot;
                that.on_cherts = type_ot;
                that.$post({
                    url: "Partner/Console/multipleCount",
                    data: {
                        type: type_ot
                    },
                    success: (data) => {
                        if (data.code == 1000) {
                            this.createChartTwo(data.data.data, data.data.abscissa);
                        } else {
                            this.$message({
                                showClose: true,
                                message: '请求失败或无数据',
                                center: true
                            });
                        }
                    }
                })
            },
            //第六板块
            messagefun() {
                var that = this;
                this.isLoad = false;
                that.$post({
                    url: "Partner/Console/message",
                    data: {},
                    success: (data) => {
                        this.isLoad = true;
                        if (data.code == 1000) {
                            that.backlog = data.data.backlog;
                            that.system_message = data.data.system_message;
                            that.platform_bulletin = data.data.platform_bulletin;
                        } else {
                            this.$message({
                                showClose: true,
                                message: '请求失败或无数据',
                                center: true
                            });
                        }
                    }
                })
            },
            getConsole() {
                this.$message({
                    showClose: true,
                    message: '数据每两小时更新',
                    center: true,
                    type: 'warning'
                });
            }

        },

        mounted() {
            // this.getConsole();
            this.getDeviceCount();//第一板块
            this.businessStatistics();//第二板块
            this.deviceSort();//第三板块
            this.incomeCount(1);//第四板块创建图表一
            this.multipleCount(1);//第五板块创建图表二
            this.messagefun();//第六板块
        }
    }

</script>
<style>
    .dataStatistics {
        width: 100%;
        height: 100%;
        background: #FFFFFF;
    }

    .dataBox {
        /*padding-left: 42px;*/
    }

    #dataStatistics .topBreadcrumb {
        font-size: 16px;
        display: flex;
        align-items: center;
        padding: 30px 0;
        border-bottom: 1px solid #cdcdcd;
    }

    #dataStatistics .topBreadcrumb .el-breadcrumb__inner {
        font-size: 16px;
        font-weight: normal;
    }

    #dataStatistics .items {
        font-size: 14px;
        display: flex;
        align-items: center;
        margin-bottom: 18px;
    }

    #dataStatistics .items span {
        font-weight: bold;
    }

    #dataStatistics .items .icons {
        color: #9e383b;
    }

    #dataStatistics .items input {
        border: 1px solid #cccccc;
        padding: 13px 9px;
        border-radius: 5px;
        margin: 0 13px;
    }

    .headBox {
        /* background: #F2F3F3; */
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    .headBox .topshow {
        display: flex;
        align-items: center;
        padding: 15px;
        font-size: 14px;
    }

    .head .topshow form {
        display: flex;
        align-items: center;
    }

    .topshow form .el-input__prefix {
        left: 10px;
    }

    .topshow form .el-input--prefix .el-input__inner {
        margin-left: 10px;
    }

    .topshow .btnstyle {
        border: none;
        width: 60px;
        height: 30px;
        color: #fff;
        font-weight: bold;
        font-size: 14px;
        background: #275485;
        margin-left: 40px;
        border-radius: 4px;
    }

    .textshow {
        margin-left: 20px;
        color: #393A39;
    }

    .r_color {
        margin-left: 20px;
        color: #BB1C22;
        text-decoration: underline;
    }

    .b_color {
        margin-left: 20px;
        color: #6794CA;
        text-decoration: underline;
          cursor: pointer;
    }

    /*中间盒子*/

    .top_box {
        height: 170px;
        margin: 0px 15px;
        display: flex;
        padding-bottom: 20px;
        font-size: 14px;
    }

    .list_Box {
        background: #fff;
        width: 18%;
        text-align: center;
        line-height: 40px;
        border: 1px solid #ccc;
        margin-right: 20px;
    }

    .list_Box > div {
        display: flex;
        justify-content: center;
        /*color: #BEBAB8;*/
    }

    .list_Box > div > span {
        display: flex;
        width: 50%;
        justify-content: center;
    }

    .list_Box .top_head {
        background: #ccc;
        color: #fff;
    }

    .last_box {
        background: #fff;
        width: 46%;
        border: 1px solid #ccc;
    }

    .last_box .last_head {
        background: #ccc;
        color: #fff;
        text-align: center;
    }

    .topbtn {
        font-size: 14px;
        display: flex;
        justify-content: space-around;
        padding: 0px 20px;
    }

    .all_choose {
        margin: 5px 10px;
        display: flex;
        border: 1px solid #2c5586;
    }

    .all_choose div {
        padding: 2px 10px;
        cursor: pointer;
    }

    .all_choose .center_box {
        border-left: 1px solid #2c5586;
        border-right: 1px solid #2c5586;
    }

    .all_choose .onit {
        background: #2c5586;
        color: #fff;
    }

    .msg_box {
        margin: 0px 10px 0px 10px;
        margin-top: 2px;
    }

    .title_s {
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
        /*color: #B2B3B0;*/
        line-height: 22px;
    }

    .title_s span {
        display: flex;
        justify-content: center;
        font-size: 14px;
    }

    .title_s span b {
        font-style: normal;
        font-size: 12px;
        font-weight: normal;
    }

    .show_a {
        width: 10%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .show_b {
        width: 15%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .show_b b {
        font-style: normal;
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .show_c {
        width: 25%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .show_d {
        width: 25%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .show_e {
        width: 25%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*.map box*/

    .mapBox {
        margin-top: 20px;
        width: 100%;
        /* background: #F2F3F3; */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .letterBox {
        padding: 15px;
        width: 49%;
        /* background: #F2F3F3; */
        height: 250px;
        position: relative;
        z-index: 100;
    }

    .choose_time {
        display: flex;
        position: absolute;
        top: 18px;
        right: 15px;
        z-index: 100;
        border: 1px solid #2c5586;
    }

    .on_choose_one {
        font-size: 12px;
        display: flex;
        padding: 2px 5px;
        cursor: pointer;
        border-right: 1px solid #2c5586;
    }

    .on_show_it {
        background: #2c5586;
        color: #fff;
    }

    .cente_choose {
        border-right: none;
    }

    .more_box {
        width: 100%;
        margin-top: 20px;
        /* background: #F2F3F3; */
        padding: 15px 0px;
        display: flex;
    }

    .box_one {
        margin: 0px 15px;
        width: 30%;
        background: #fff;
        color: #C8C9C8;
    }

    .last_head {
        padding: 10px;
        background: #E5E5E4;
        height: 20px;
        color: #999;
    }

    .list_mag {
        font-size: 14px;
        color: #C8C9C8;
        text-decoration: underline;
        margin: 8px 10px;
    }

    .span_show {
        display: inline-block;
        margin: 2px 6px;
        cursor: pointer;
    }

    .no_data_show{
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 50px 0;
      color: #999;
      font-size: 14px;
    }
    .no_data_show img{
      width: 120px;
      margin-bottom: 10px;
    }
</style>
